<script setup lang="ts">
defineOptions({
  name: "allOrders"
});

import { ref, onActivated, onMounted, onUnmounted, markRaw, getCurrentInstance, inject } from "vue";
import { useRouter } from "vue-router";
import { queryFillingWagonOrderList } from "@/api/modules/operation";
import commonTable from "@/views/common/components/commonTable/index.vue";
import commonSearch from "@/views/common/components/commonSearch/index.vue";
import { View } from "@px-ui/icons-vue";
import { useTableCloumns, useSearchOption } from "../hooks";
import { useUpdateDomHeight, useCancelUpdateDomHeight } from "@/hooks/useCommon";
import { useThrottleFn } from "@vueuse/core";
import { throttleDelay as delay } from "@/utils/constant";

const router = useRouter();

const activeTab = inject("activeTab", ref<string>(""));

const searchLoading = ref<boolean>(false);
const gap = 88;
const defaultHeight = 606;
const objectModelTableRef = ref<HTMLElement | null>(null);
const commonTableRef = ref<CommonTable.TableRefType>(null);
const commonSearchRef = ref<CommonSearch.SearchFormRefType>(null);
const scrollbarHeight = ref<number>(defaultHeight);
const searchOption = ref<Array<CommonSearch.SearchOption>>(useSearchOption());

const params = ref<any>({});

const operationOptions: Array<CommonTable.operationOptionItemType> = [
  {
    content: "查看",
    auth: "GAS_OPERATION_ACIDDRUMMANAGE_FILLINFWAGON_CHECKBTN",
    icon: markRaw(View),
    click: (scope: any) => check(scope)
  }
];

let defaultParams: any = {
  // 0：总览，1：我的工单
  scope: 0,
  // 	1:气瓶 2：酸桶 3:槽车充装
  taskType: 3
};
let currentParams: any = {};

const getRowKey = row => {
  return row.id;
};

const headerCellStyleFn = ({ row, column, rowIndex, columnIndex }: CommonTable.CellType): Record<string, string> => {
  const style = {};
  if (columnIndex === 2) {
    style["text-align"] = "center";
  }
  return style;
};

const updateParams = () => {
  params.value = { ...defaultParams, ...currentParams };
};

const submitSearchFormHandler = (form: any) => {
  currentParams = { ...currentParams, ...form };
  updateParams();
};

const resetSearchFormHandler = () => {
  currentParams = {};
  updateParams();
};

const addHandler = () => {
  const path = "/gas/operation/acidDrumManage/fillingWagon/add";
  router.push({ path });
};

const { proxy }: any = getCurrentInstance();

const batchExportFn = useThrottleFn(async () => {
  const url = "/operation/api/v1/gas/tankTask/export";
  const params = commonTableRef.value.getParams();
  proxy.download("post", url, params);
}, delay);

const check = scope => {
  const {
    row: { id = "", taskStatus: status }
  } = scope;
  if (!id) return;
  // status    1 执行中    2 执行完成
  const type = "check";
  router.push({ path: "/gas/operation/acidDrumManage/fillingWagon/check", query: { type, status, id } });
};

const tableCloumns = ref<Array<CommonTable.TableCloumnsType>>(useTableCloumns(check));

onMounted(async () => {
  await useUpdateDomHeight(scrollbarHeight, objectModelTableRef, gap, defaultHeight);
});

onUnmounted(() => useCancelUpdateDomHeight());

const activeFlag = ref<boolean>(false);

onActivated(() => {
  if (activeFlag.value && activeTab.value === "allOrders") {
    commonTableRef.value.queryTableData();
  }
  if (!activeFlag.value) {
    activeFlag.value = true;
  }
});
</script>

<template>
  <div v-loading="searchLoading" class="all-orders">
    <div class="all-orders-search">
      <commonSearch
        v-if="searchOption?.length"
        ref="commonSearchRef"
        v-model:loading="searchLoading"
        :row-num="4"
        :operationSpan="3"
        :option="searchOption"
        @submit="submitSearchFormHandler"
        @reset="resetSearchFormHandler"
      />
    </div>
    <div class="all-orders-btns">
      <px-button v-has="'GAS_OPERATION_ACIDDRUMMANAGE_FILLINFWAGON_ADDBTN'" type="primary" @click="addHandler">创建工单</px-button>
      <px-button v-has="'GAS_OPERATION_ACIDDRUMMANAGE_FILLINFWAGON_EXPORTBTN'" type="primary" plain @click="batchExportFn">批量导出</px-button>
    </div>
    <div ref="objectModelTableRef" class="all-orders-table">
      <commonTable
        ref="commonTableRef"
        indexNeed
        :operationOptions="operationOptions"
        :tableCloumns="tableCloumns"
        :height="scrollbarHeight"
        :row-key="getRowKey"
        :header-cell-style="headerCellStyleFn"
        :axiosApi="queryFillingWagonOrderList"
        :params="params"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.all-orders {
  width: 100%;
  background-color: #fff;

  .all-orders-search {
    width: 100%;
  }

  .all-orders-btns {
    display: flex;
    align-items: center;
    margin-top: 16px;
  }

  .all-orders-table {
    margin-top: 16px;
  }
}
</style>
